<template>
	<div style="height: 100%;">
		
		<div style="margin-bottom: 10px;">
			<el-select v-model="params.status" placeholder="审批状态" size="small" @change="reset()" clearable>
				<el-option label="审核中" value="APPROVING" />
				<el-option label="已同意" value="PASS" />
				<el-option label="已撤回" value="CANCEL" />
				<el-option label="已驳回" value="FAIL" />
			</el-select>
		</div>

		<div style="height: calc(100% - 82px);overflow-y: auto;">

			<div v-for="(item,index) in data3" :key="item.id"
				style="background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 16px;font-size: 14px;">
				<div class="displayFlexBet" style="margin-bottom: 10px;">
					<div style="font-size: 16px;font-weight: bold;">{{item.approveTypeStr}}</div>
					<div style="color: #999;">
						<span>{{item.launchUserName}}</span>
						<span style="margin-left: 10px;">{{item.createTimeStr}}</span>
					</div>
				</div>

				<div style="margin-bottom: 10px;">
					<span>内容：</span>
					<span>{{item.content || '暂无'}}</span>
				</div>
				
				<div style="margin-bottom: 10px;">
					<span>审批状态：</span>
					<span>{{item.statusStr}}</span>
				</div>
				
				<div class="displayFlexBet">
					<div v-if="item.nodeList" class="displayFlex">
						<div v-for="(item1,index1) in item.nodeList" :key="index1">
							<div v-if="index1 != item.nodeList.length - 1" class="displayFlex">
								<div class="displayFlex">
									<img src="@/assets/sIcon36.png" style="width: 30px;height: 30px;"></image>
									<span style="margin-left: 5px;">{{item1.userName}}</span>
									<!-- <span style="color: #999;font-size: 10px;">({{item1.statusStr}})</span> -->
								</div>
								<div style="margin-left: 16px;margin-right: 16px;">
									<img src="@/assets/sIcon37.png" style="width: 20px;height: 10px;"></image>
								</div>
							</div>
							<div class="displayFlex" v-else>
								<img v-if="item1.status == 'APPROVING' || item1.status == 'WAIT'" src="@/assets/sIcon38.png"
									style="width: 30px;height: 30px;" />
								<img v-else-if="item1.status == 'PASS'" src="@/assets/sIcon30.png" style="width: 30px;height: 30px;" />
								<img v-else-if="item1.status == 'FAIL'" src="@/assets/sIcon39.png" style="width: 30px;height: 30px;" />
								<img v-else-if="item1.status == 'CANCEL'" src="@/assets/sIcon40.png"
									style="width: 30px;height: 30px;" />
								<span style="margin-left: 5px;">{{item1.userName}}</span>
								<span style="color: #999;font-size: 10px;">({{item1.statusStr}})</span>
							</div>
						</div>
					</div>
					<div v-else></div>

					<div>
						<el-button type="info" plain size="small"
							@click="selectItem = item,$refs.approveDet.open(item)">审批</el-button>
					</div>
				</div>
			</div>
		</div>

		<div v-show="data3&&data3.length>0" align="right" style="margin-top: 10px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="pageIndex" :page-sizes="[10,20,30,50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<approveDet ref="approveDet" @success="reset"></approveDet>
	</div>
</template>

<script>
	import approveDet from "@/components/approveDet"
	let that
	export default {
		components: {
			approveDet
		},
		data() {
			return {
				params: {
					status: ''
				},
				selectItem: '',
				data3: [], //待审批
				pageIndex: 1,
				pageSize: 20,
				total: 0,
			}
		},

		mounted() {
			that = this
			that.getData()
		},

		methods: {

			reset() {
				this.pageIndex = 1;
				this.getData();
			},

			handleSizeChange: function(val) {
				this.pageIndex = 1;
				this.pageSize = val;
				this.getData();
			},

			handleCurrentChange: function(val) {
				this.pageIndex = val;
				this.getData();
			},

			getData() {
				that.ajax({
					url: '/approvalNode/pageApprovingDataList?ticketId=' + this.$store.state.token +
						'&pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: (result) => {
						if (result.status == 1) {
							that.data3 = result.data.records
							that.total = result.data.total
							that.$forceUpdate()
						}
					}
				}, "加载中...");
			},

		}
	}
</script>

<style scoped>
	page {
		background: #F3F3F3;
	}
</style>